<template>
    <div class="global">
        <div class="leftmenu">
            <n-menu :options="menuOptions" v-model:value="activeKey" />
        </div>
        <div class="rightmenu">
            <!-- <div v-if="activeKey == '修改资料'">
                
            </div> -->
            <UpdateZl v-if="activeKey == '修改资料'"></UpdateZl>
            <UpdateMm v-if="activeKey == '修改密码'"></UpdateMm>
            <YhjJl v-if="activeKey == '优惠券记录'"></YhjJl>
            <MyOrder v-if="activeKey == '我的订单'"></MyOrder>
        </div>
    </div>
</template>

<script setup>
import { NMenu } from 'naive-ui';
import { useRoute } from "vue-router"
const route = useRoute()
const activeKey = ref("我的订单");
const menuOptions = ref([
{
        label: '我的订单',
        key: '我的订单',
        href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199'
    },    
{
        label: '优惠券记录',
        key: '优惠券记录',
        href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199'
    },
    {
        label: '修改资料',
        key: '修改资料',
        href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199'
    }, {
        label: '修改密码',
        key: '修改密码',
        href: 'https://baike.baidu.com/item/%E4%B8%94%E5%90%AC%E9%A3%8E%E5%90%9F/3199'
    }])

onMounted(() => {
    // activeKey.value=route.query.name

})
</script>
<style lang="css" scoped>
.leftmenu {
    width: 300px;
    height: auto;
    background: #fff;
}

.rightmenu {
    width: calc(100% - 310px);
    min-height: 75vh;
    background: #fff;
}

.global {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}
</style>
